<template>
  <div class="mint-search">
    <div class="mint-searchbar">
      <div class="mint-searchbar-inner">
        <i class="mintui mintui-search"></i>
        <input
          ref="input"
          @click="visible = true"
          type="search"
          v-model="currentValue"
          :placeholder="placeholder"
          class="search mint-searchbar-core">
      </div>
      <a
        class="mint-searchbar-cancel"
        @click="visible = false, currentValue = ''"
        v-show="visible"
        v-text="cancelText">
      </a>
    </div>
  </div>
</template>

<script>

export default {
  name: 'mt-search',
  data () {
    return {
      visible: false,
      currentValue: this.value
    }
  },
  watch: {
    currentValue (val) {
      this.$emit('input', val)
    },
    value (val) {
      this.currentValue = val
    }
  },
  props: {
    value: String,
    autofocus: Boolean,
    show: Boolean,
    cancelText: {
      default: '取消'
    },
    placeholder: {
      default: '搜索'
    }
  },
  mounted () {
    this.autofocus && this.$refs.input.focus()
  }
}
</script>

<style lang="scss" scoped>
  .mint-search {
    height: 100%;
    overflow: hidden;
    .mint-searchbar {
      background: #1e82d2;
      .mint-searchbar-inner {
        height: 2em;
        background: #1a72b9;
        padding: 0 6px;
        .mintui-search {
          font-size: 14px;
        }
      }
      .mint-searchbar-cancel {
        color: #ffffff;
        font-size: 0.8em;
      }
    }
  }
</style>
